<template>
  <transition name="dialoger">
    <!-- 外层蒙层 -->
    <div :class="{dialogMask: mask, dialog: !mask}" v-if="visible">
      <!-- 弹框主体 -->
      <div class="dialog-container">
        <!-- 头部 -->
        <div class="dialog-header" :class="{headerFill: !title}">
          <h4 class="dialog-header-title" v-if="title">{{ title }}</h4>
          <i v-if="closable" class="iconfont icon-guanbi2 close" :class="{closePos: title}" @click="close"></i>
        </div>
        <!-- 弹框主体 -->
        <div class="dialog-body">
          <slot></slot>
        </div>
        <!-- 弹框底部 -->
        <div class="dialog-footer">
          <slot name="footer">
            <div class="footerDefault" v-if="closable">
              <button type="button" class="btn" @click="confirm">确定</button>
              <button type="button" class="btn btn-red m_l10" @click="close">取消</button>
            </div>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>
<script setup>
const props = defineProps({
  // 弹框显示开关
  visible: {
    type: Boolean,
    default: false
  },
  // 是否开启全屏蒙层，不开启蒙层时内容以弹框内容为主，依靠外部定位relative
  mask: {
    type: Boolean,
    default: true
  },
  // 传入的header标题
  title: {
    type: String,
    default: ''
  },
  // 是否可以关闭
  closable: {
    type: Boolean,
    default: true
  }
});

const emits = defineEmits(['confirm', 'cancel']);
const confirm = () => {
  emits('confirm');
};
const close = () => {
  emits('cancel');
};
</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.dialogMask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
  margin: 0;
  z-index: 2001;
  background-color: var(--color-white-5);
  display: flex;
  @include flex-all-center;
}
.dialog-container {
  width: 40%;
  background-color: var(--color-white-10);
  border: 1px solid var(--color-black-2);
  border-radius: 6px;
  outline: 0;
  overflow: hidden;
  -webkit-box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
  // 头部
  .dialog-header {
    padding: 15px;
    border-bottom: 2px solid var(--color-main-5);
    text-align: left;
    position: relative;
    .dialog-header-title {
      color: var(--color-main);
      font-weight: bold;
      font-size: 18px;
    }
    .close {
      text-align: right;
      cursor: pointer;
      color: var(--color-main);
      font-weight: bolder;
    } 
    .closePos {
      position: absolute;
      right: 10px;
      top: 18px;
    }
  }
  // 未传入title时close按钮右侧对齐
  .headerFill {
    text-align: right;
  }
  // 弹框主体部分
  .dialog-body {
    @include scrollBar;
    box-sizing: border-box;
    background-color: var(--color--dialog-body);
    position: relative;
    padding: 15px;
    min-height: 100px;
    max-height: 450px;
    overflow: auto;
  }
  .dialog-footer {
    padding: 15px;
    border-top: 2px solid var( --color-main-5);
  }
  // 开启关闭功能时的默认样式
  .footerDefault {
    text-align: right;
  }
}
@media (max-width: 600px) {
  .dialog {
    width: 100%;
  }
  .dialog-container {
    width: 100%;
  }
}
</style>